<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正在安装中... - HPCMS</title>
    <link rel="stylesheet" href="./static/style.css">
    <style>
        #app {
            padding: 30px;
        }

        .el-card__body {
            padding: 0 !important;
        }

        .steps-wrap {
            width: 900px;
            margin: 0 auto;
        }

        .card-wrap {
            margin-top: 30px;
        }

        .card-wrap .box-card {
            width: 900px;
            margin: 0 auto;
        }

        .card-wrap .box-card .clearfix {
            font-weight: 700;
        }

        .card-wrap .box-card .content {
            height: 500px;
            overflow-y: auto;
            border: 1px solid #e1e1e1;
            padding: 10px;
        }

        .card-wrap .box-card .content .install {
            font-size: 13px;
            color: #666;
            margin-top: 3px;
        }

        .card-wrap .box-card .action {
            padding: 10px 10px 10px 0;
            text-align: right;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="page">
            <div class="steps-wrap">
                <el-steps :active="steps.active" :space="200" finish-status="success" process-status="finish"
                    align-center>
                    <el-step v-for="(item,index) in steps.list" :key="index" :title="item.title"></el-step>
                </el-steps>
            </div>
            <div class="card-wrap">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>正在安装中，切勿操作</span>
                    </div>
                    <div class="content">
                        <div v-for="(actText,index) in actList" :key="index" class="install">{{index+1}}、{{actText}}
                        </div>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
    <!-- 引入Vue -->
    <script src="./static/vue-2.6.14.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./static/element-ui@2.15.3.css">
    <!-- 引入组件库 -->
    <script src="./static/element-ui@2.15.3.js"></script>
    <script src="./static/axios.min.js"></script>
    <script>
        var _this;
        new Vue({
            el: '#app',
            data: function () {
                return {
                    loadingObj: '',
                    steps: {
                        active: 3,
                        list: [
                            {
                                title: '使用协议',
                            },
                            {
                                title: '环境检测',
                            },
                            {
                                title: '数据配置',
                            },
                            {
                                title: '开始安装',
                            },
                            {
                                title: '安装完成',
                            },
                        ],
                    },
                    actList: [],
                }
            },
            created() {
                _this = this;
                _this.initify();
            },
            methods: {
                // 执行安装请求
                async install(act, post) {
                    var data = {
                        act: act,
                        data: post,
                    }
                    return await axios.post('/install/step4', data)
                },
                openWin(path) {
                    window.location.href = path;
                },
                // 初始化安装
                initIntall() {
                    var dataJson = localStorage.getItem('temp_data');
                    dataJson = JSON.parse(dataJson);
                    var database = dataJson.database;
                    var admin = dataJson.admin;
                    _this.loadingObj.close();
                    _this.actList.push("正在准备安装数据库...");
                    _this.install('database', database).then(function (response) {
                        var res = response.data;
                        if (res.code == 200) {
                            res.data.map((val) => {
                                _this.actList.push(val);
                            });
                            _this.actList.push("正在准备创建管理员...");
                            var adminData = {
                                database:database,
                                admin:admin
                            }
                            _this.install('admin', adminData).then((response2) => {
                                var res2 = response2.data;
                                if (res2.code == 200) {
                                    res2.data.map((val2) => {
                                        _this.actList.push(val2);
                                    });
                                    _this.actList.push("正在准备生成后台...");
                                    _this.install('background', adminData).then((response3) => {
                                        var res3 = response3.data;
                                        if (res3.code == 200) {
                                            res3.data.map((val3) => {
                                                _this.actList.push(val3);
                                            });
                                            localStorage.removeItem('temp_data');
                                            setTimeout(() => {
                                                _this.openWin('/install/step5.html');
                                            }, 1500);
                                        } else {
                                            _this.$message({
                                                message: res3.msg,
                                                type: 'error'
                                            });
                                        }
                                    });
                                } else {
                                    _this.$message({
                                        message: res2.msg,
                                        type: 'error'
                                    });
                                }
                            });
                        } else {
                            _this.$message({
                                message: res.msg,
                                type: 'error'
                            });
                        }
                    }).catch(function (error) {
                        _this.loadingObj.close();
                        console.log(error);
                    });
                },
                initify() {
                    _this.loadingObj = _this.$loading({
                        lock: true,
                        text: '正在加载中...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(255, 255, 255)'
                    });
                    _this.initIntall();
                },
            },
        })
    </script>
</body>

</html>